<template>
  <div class="common-nav">
    <ul class="nav-list">
      <router-link tag='li'
        :to="item.path"
        v-for="(item,index) in navData" :key="index"
        @click="toogle(index)"
        :class="{active:index==active}"
        >
      {{item.title}}
     </router-link>

     <div class="filt" @click="showHide">
       <i class="iconfont">&#xe64a;</i>
     </div>

    </ul>

    <div class="filt-list" v-show="flag">
      <ul>
        <li v-for="(item,index) in filtData" @click="getValue(index)" :class="{'filt-active':nowIndex==index}">{{item.title}}</li>
      </ul>
    </div>

  </div>
</template>

<script>
import '@/assets/font/iconfont.css'
export default {
  name:'CommonNav',
  data(){
    return{
      flag:false,
      nowIndex:-1
    }
  },
  props:{
    active:{
      type:[String,Number],
      default:''
    },
    navData:{
      type:Array,
      default:function(){
        return []
      }
    },
    filtData:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  methods:{
    toogle(index){
      this.active=index;
      this.$emit("navEvent",this.navData)
      console.log(this.navData);
    },
    showHide(event){
      this.flag=!this.flag;
    },
    getValue(index){
      this.nowIndex=index;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.common-nav{
  background: #fff;
  width: 100%;
  position: relative;
}
.nav-list{
  font-size: 16px;
  padding: 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
  border: 1px solid #f1f1f1;
}
.nav-list li{
  text-align: center;
    font-size: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 10px;
    margin: 5px;
}
.router-link-active{
  color: #109d59;
  border-bottom: 2px solid #109d59;
}
.filt{
  background: #fff;
  width: 0.5rem;
  position: absolute;
  top:0;
  right:0;
  border: 1px solid #f1f1f1;
  text-align: center;
}
.filt i{
  font-size: 25px;
  color: #109d59;
  line-height:0.52rem;
}
.filt-list{
  position: absolute;
  top:0.52rem;
  right: 0;
  z-index:999;
  width: 0.9rem;
  background: #fff;
  text-align: center;
}
.filt-list ul li{
  border:1px solid #f5f5f5;
  height: 0.3rem;
  color:black;
  font-size: 14px;
  padding:0.07rem 0.03rem 0 .03rem;
}
.filt-active{
  background: #f1f1f1;
}
</style>
